<template>
  <div v-for="item in colmuns">
    <div class="select_item" v-if="item.type === 'input'">
      <div class="select_item_top">{{ item.title }}:</div>
      <el-input
        :style="{ width: `${item.width ? item.width : '180'}px` }"
        v-model="modelForm[item.value]"
        :placeholder="item?.placeholder"
        :clearable="item?.clearable"
        @change="go"
      />
    </div>
    <div class="select_item" v-if="item.type === 'inputNumber'">
      <div class="select_item_top">{{ item.title }}:</div>
      <el-input
        :style="{ width: `${item.width ? item.width : '180'}px` }"
        v-model="modelForm[item.value]"
        :placeholder="item?.placeholder"
        :clearable="item?.clearable"
        type="number"
        @change="go"
      />
    </div>
    <div class="select_item" v-if="item.type === 'select'">
      <div class="select_item_top">{{ item.title }}:</div>
      <el-select
        :style="{ width: `${item.width ? item.width : '180'}px` }"
        v-model="modelForm[item.value]"
        :placeholder="item?.placeholder"
        :clearable="item?.clearable"
        @change="go"
      >
        <el-option
          v-for="items in item?.options"
          :key="items.value"
          :label="items.label"
          :value="items.value"
        />
      </el-select>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  components: {},
  props: {
    // Form列配置项
    colmuns: {
      default: [] as any,
    },
    // Form初始空数据
    modelForm: {
      default: {} as any,
    },
  },
  setup(props, { emit }) {
    const go = () => {
      emit("onFormChange");
    };
    return { go };
  },
});
</script>
<style scoped>
.select_item {
  display: flex;
  align-items: center;
  margin-left: 15px;
  .select_item_top {
    margin-right: 15px;
  }
}
</style>
